<template>
	<view class="content">
		<image class="background-image" src="../../static/loginbg.png" mode="aspectFill"></image>
		<view class="content-mask">
			<view class="app-title">学呗</view>
			<view class="app-title-sub">学习笔记分享社区</view>
			<view class="login-form">
				<view class="form-row">
					<view class="form-label">登录名：</view>
					<input class="form-input" type="text"  />
				</view>
				<view class="form-row">
					<view class="form-label">登录密码：</view>
					<input class="form-input" type="password"  />
				</view>
			</view>
			<view class="login-button" >立即登录</view>
			<view class="regist-button" >申请加入</view>
		</view>
	</view>
</template>
<style>
	.content{
		width:100vw;
		height:100vh;
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center center;
		color:#fff;
		display: flex;
		flex-direction: column;
	}
	.background-image{
		width: 100vw;
		height: 100vh;
		position: absolute;
		z-index:1;
	}
	.content-mask{
		width: 100vw;
		height: 100vh;
		position: absolute;
		color: #fff;
		z-index:2;
		display: flex;
		flex-direction: column;
		background-color: rgba(0,0,0,0.4);
	}
	.app-title{
		font-size:300%;
		text-align: center;
		margin-top:200rpx;
	}
	.app-title-sub{
		text-align: center;
		margin-top:20rpx;
		letter-spacing: 25rpx;
	}
	.login-form{
		width:80%;
		margin:0 5%;
		padding: 10rpx 5%;
		margin-top:260rpx;
	}
	.form-row{
		margin-top:30rpx;
	}
	.form-label{
		color:#ddd;
		font-size:90%;
	}
	.form-input{
		border-bottom:1px solid #ddd;
		padding:10rpx;
		letter-spacing: 10rpx;
		font-size:110%;
		font-weight: bold;
	}
	.login-button{
		width:70%;
		height:60rpx;
		line-height: 60rpx;
		padding:15rpx;
		background-color: #ff2442;
		text-align: center;
		margin:0 auto;
		margin-top:80rpx;
		border-radius: 45rpx;
	}
	.regist-button{
		text-align: center;
		margin-top:30rpx;
	}
	
</style>
<script>
	export default {
		//1、数据定义:
		//页面上需要展示的数据
		//页面上需要绑定的数据
		//控制页面样式的数据
		data() {
			return {
				
			}
		},
		//2、逻辑处理
		methods: {
			
		},
		//3、生命周期
		onLoad(){

		}
	}
</script>


